// 抽离了导航组件
import React, { useState } from "react";

import { Menu } from "antd";

import { useNavigate } from "react-router-dom";

import { treeData } from "../useradmin/Index";

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}

const checkedkeys = JSON.parse(localStorage.getItem("checkedkeys"));
const adminname = localStorage.getItem("adminname");

let items;

if (adminname === "admin") {
  items = treeData.map((item) => {
    if (item.children) {
      return getItem(
        item.title,
        item.key,
        item.icon,
        item.children.map((value) => {
          return getItem(value.title, value.key, value.icon);
        })
      );
    } else {
      return getItem(item.title, item.key, item.icon);
    }
  });
} else {
  items = treeData.map((item) => {
    if (checkedkeys.includes(item.key)) {
      if (item.children) {
        return getItem(
          item.title,
          item.key,
          item.icon,
          item.children.map((value) => {
            if (checkedkeys.includes(value.key)) {
              return getItem(value.title, value.key, value.icon);
            } else {
              return null;
            }
          })
        );
      } else {
        return getItem(item.title, item.key, item.icon);
      }
    } else {
      return null;
    }
  });
}

// const items = [
//   getItem("系统首页", "/home/main", <PieChartOutlined />),
//   getItem("轮播图管理", "2", <DesktopOutlined />, [
//     getItem("轮播图列表", "/home/bannerlist"),
//     getItem("添加轮播图", "/home/banneradd"),
//   ]),
//   getItem("产品管理", "3", <ContainerOutlined />, [
//     getItem("产品列表", "/home/project"),
//   ]),
//   getItem("账号管理", "4", <MailOutlined />, [
//     getItem("用户列表", "/home/userlist"),
//     getItem("管理员列表", "/home/useradmin"),
//   ]),
//   getItem("数据可视化", "/home/echarts", <AppstoreOutlined />),
//   getItem("编辑器", "6", <MailOutlined />, [
//     getItem("富文本编辑器", "/home/editor"),
//     getItem("MD编辑器", "/home/md"),
//   ]),
//   getItem("文件处理", "7", <MailOutlined />, [
//     getItem("导出excel", "/home/export"),
//     getItem("导入excel", "/home/import"),
//   ]),
//   getItem("高德地图", "/home/map", <AppstoreOutlined />),
// ];

const rootSubmenuKeys = ["2", "3", "4", "6", "7"];

const MyMenu = () => {
  const navigate = useNavigate();

  const menuClick = ({ item, key, keyPath, domEvent }) => {
    // console.log({ item, key, keyPath, domEvent });
    navigate(key);
  };

  const [openKeys, setOpenKeys] = useState([]);
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <Menu
      mode="inline"
      theme="dark"
      items={items}
      onClick={menuClick}
      openKeys={openKeys}
      onOpenChange={onOpenChange}
    />
  );
};

export default MyMenu;
